<template>
  <div>
    <div class="total-part card">
      <p class="card-title">数据总览</p>
      <div class="part-main flex">
        <div v-for="(item, index) in dataOverview" :key="index" class="item">
          <img :src="item.icon">
          <p class="item-name font-14">{{ item.name }}</p>
          <p class="item-num font-20-B">{{ numConvert(item.count, 2) }}</p>
          <div class="item-platform flex-between flex-align-items-center">
            <div class="platform-item">
              <p class="platform-item-name font-12">YouTube</p>
              <p class="platform-item-value font-14">{{ index === 3 ? item.count : numConvert(item.count, 2) }}</p>
            </div>
            <div class="platform-item">
              <p class="platform-item-name font-12">TikTok</p>
              <p class="platform-item-value font-14">{{ index === 3 ? item.count : numConvert(item.count, 2) }}</p>
            </div>
            <div class="platform-item">
              <p class="platform-item-name font-12">Instagram</p>
              <p class="platform-item-value font-14">{{ index === 3 ? item.count : numConvert(item.count, 2) }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="platform-part card">
      <p class="card-title">平台分析</p>
      <div class="part-main">
        <div class="platform-tip flex-center">
          <div v-for="(item, index) in platformList" :key="index" class="item flex flex-align-items-center font-14">
            <span :style="{ background: item.color }"></span>
            {{ item.name }}
          </div>
        </div>
        <div class="platform-sort flex-center">
          <div v-for="(item, index) in platformAnalysis" :key="index"
            class="item flex flex-column flex-align-items-center">
            <div :id="item.id" class="echart"></div>
            <div class="item-tips">
              <p class="tips-name font-16-B">{{ item.name }}</p>
              <p class="tips-desc font-14">各平台占比</p>
            </div>
            <div class="platform-bar flex-between">
              <p class="flex flex-align-items-center font-16-B">
                <img src="@/assets/icon-1.png">{{ numConvert(item.count, 2) }}
              </p>
              <p class="flex flex-align-items-center font-16-B">
                <img src="@/assets/icon-2.png">{{ numConvert(item.count, 2) }}
              </p>
              <p class="flex flex-align-items-center font-16-B">
                <img src="@/assets/icon-3.png">{{ numConvert(item.count, 2) }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="analysis-part card">
      <p class="card-title">推广活动趋势</p>
      <div class="view-toggle flex flex-align-items-center">
        <i class="iconfont icon-tubiao pointer" :class="{ active: analysisPartForm.format === 'echart' }"
          @click="analysisPartFormatChange('echart')"></i>
        <span></span>
        <i class="iconfont icon-caidan1 pointer" :class="{ active: analysisPartForm.format === 'table' }"
          @click="analysisPartFormatChange('table')"></i>
      </div>
      <div class="part-main">
        <div v-show="analysisPartForm.format === 'echart'" class="content-trend-list flex-between">
          <div v-for="(item, index) in contentTrendList" :key="index" class="content-trend-item pointer"
            :class="{ active: item.type === analysisPartForm.type }" @click="contentTrendTypeChange(item.type)">
            <p class="content-trend-item-name flex flex-align-items-center">
              <i class="iconfont" :class="item.icon"></i>
              <span class="font-14">{{ item.name }}</span>
            </p>
            <p class="content-trend-item-num font-20-B">{{ item.value }}</p>
          </div>
        </div>
        <div class="platform-tip flex-center">
          <div v-for="(item, index) in platformList" :key="index" class="item flex flex-align-items-center font-14">
            <span :style="{ background: item.color }"></span>
            {{ item.name }}
          </div>
        </div>
        <div v-show="analysisPartForm.format === 'echart'" id="content-trend-echart"></div>
        <div v-if="analysisPartForm.format === 'echart'" class="analysis-data">
          <div class="top flex-between flex-align-items-center">
            <div class="top-time flex flex-align-items-center">
              <p class="date font-20-B">2024年01月</p>
              <p class="tips font-14">*增长/下降百分比数值为环比数据</p>
            </div>
            <div class="top-btn flex-center flex-align-items-center pointer font-16">
              <i class="iconfont icon-baogao"></i>查看报告
            </div>
          </div>
          <div class="bottom flex">
            <div v-for="(item, index) in platformAnalysis" :key="index" class="data-item flex-between">
              <div class="item-left flex flex-align-items-center">
                <p class="item-icon flex-center flex-align-items-center">
                  <i class="iconfont" :class="item.icon"></i>
                </p>
                <div class="name">
                  <p class="label font-14">{{ item.name }}</p>
                  <p class="value font-18-B">{{ item.count }}</p>
                </div>
              </div>
              <div class="item-right flex flex-align-items-center font-16-B">
                <i class="iconfont icon-xiajiantou1"></i>{{ item.rate }}
              </div>
            </div>
          </div>
        </div>
        <template v-if="analysisPartForm.format === 'table'">
          <el-table :data="analysisPartTableData" height="420" class="table">
            <el-table-column prop="time" label="日期" />
            <el-table-column label="推广红人">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
            <el-table-column label="推广视频">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
            <el-table-column label="曝光量">
              <template #default="scope">
                <p class="font-14">{{ numConvert(scope.row.count, 2) }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template #default="scope">
                <div class="row-btns flex flex-align-items-center">
                  <p class="row-btn font-14 pointer" @click="toDetail(scope.row)">查看报告</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination flex flex-align-items-center" style="justify-content: end;height: 64px;">
            <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
              :total="analysisPartForm.total" />
          </div>
        </template>
      </div>
    </div>

    <div class="other-part card">
      <p class="card-title">相似品牌</p>
      <div class="part-main">
        <div class="list">
          <item v-for="item in brandList" :key="item.id" :item="item"></item>
        </div>

        <div class="pagination flex flex-align-items-center" style="justify-content: end;height: 64px;">
          <el-pagination :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total" :total="brandTotal" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Item from './item.vue';
import { ref, onMounted } from 'vue';
import numConvert from '@/js/numConvert.js';
import * as echarts from "echarts";

const platformList = [
  {
    name: 'YouTube',
    color: '#ff5277'
  },
  {
    name: 'Tik Tok',
    color: '#ffcc27'
  },
  {
    name: 'Instagram',
    color: '#555cfd'
  }
];

const dataOverview = ref([
  {
    name: '推广红人数',
    count: 1156465,
    icon: require('../../../../../assets/icon-14.png')
  },
  {
    name: '推广视频数',
    count: 1156465,
    icon: require('../../../../../assets/icon-16.png')
  },
  {
    name: '曝光量',
    count: 1156465,
    icon: require('../../../../../assets/icon-24.png')
  },
  {
    name: '品牌互动率（平均）',
    count: 1156465,
    icon: require('../../../../../assets/icon-23.png')
  }
]);
const platformAnalysis = ref([
  {
    id: 'platform1',
    name: '推广红人',
    count: 12345,
    rate: '99.96%',
    icon: 'icon-fensix'
  },
  {
    id: 'platform2',
    name: '推广视频',
    count: 12345,
    rate: '99.96%',
    icon: 'icon-shipinshuliang'
  },
  {
    id: 'platform3',
    name: '曝光量',
    count: 12345,
    rate: '99.96%',
    icon: 'icon-guankanliang'
  }
]);
const analysisPartForm = ref({
  format: 'echart',
  type: 'fans',
  total: 100
});
const contentTrendList = ref([
  {
    name: '推广红人',
    type: 'fans',
    icon: 'icon-fensix',
    value: 132456
  },
  {
    name: '推广视频',
    type: 'video',
    icon: 'icon-shipinshuliang',
    value: 132456
  },
  {
    name: '曝光量',
    type: 'averageViews',
    icon: 'icon-guankanliang',
    value: 132456
  }
]);
const analysisPartTableData = ref([
  {
    time: '2023-12',
    count: 12341
  }
]);
const brandTotal = ref(100);
const brandList = ref([
  {
    id: 1,
    follow: false,
    Unlock: true,
    name: 'xxx',
    img: 'https://www.wotohub.com/static/img/koc_default_man.8132f247.svg',
    cate: '数码电器',
    count: 11111
  },
  {
    id: 2,
    follow: true,
    name: 'xxx',
    img: 'https://www.wotohub.com/static/img/koc_default_man.8132f247.svg',
    cate: '数码电器',
    count: 11111
  }
]);

const platformAnalysisEcharts = () => {
  platformAnalysis.value.forEach(item => {
    const myEChart = echarts.init(document.getElementById(item.id));
    const data = [];
    const colors = [];
    let value = 0;
    platformList.forEach(platform => {
      data.push({
        name: platform.name,
        value: item.count,
        label: {
          show: false
        }
      });
      colors.push(platform.color);
      value += item.count;
    });
    data.push({
      // make an record to fill the bottom 50%
      value: value,
      itemStyle: {
        // stop the chart from rendering this piece
        color: 'none',
        decal: {
          symbol: 'none'
        }
      },
      label: {
        show: false
      }
    });
    const option = {
      tooltip: {
        trigger: 'item'
      },
      color: colors,
      series: [
        {
          type: 'pie',
          radius: ['150%', '190%'],
          center: ['50%', '100%'],
          startAngle: 180,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 24,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };
    myEChart.setOption(option);
  });
}
// 切换echart或table
const analysisPartFormatChange = e => {
  if (analysisPartForm.value.format !== e) {
    analysisPartForm.value.format = e;
    analysisEchart();
  }
}
const contentTrendTypeChange = e => {
  if (analysisPartForm.value.type !== e) {
    analysisPartForm.value.type = e;
    analysisEchart();
  }
}
const analysisEchart = () => {
  const myEChart = echarts.init(document.getElementById("content-trend-echart"));
  let xAxisData = [], series = [], seriesData = [], legendData = [];
  analysisPartTableData.value.forEach(item => {
    xAxisData.push(item.time);
    seriesData.push(item.count);
  });
  platformList.forEach(item => {
    series.push({
      data: seriesData,
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      itemStyle: {
        color: item.color
      }
    });
  });
  const option = {
    tooltip: {},
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: series
  };
  myEChart.setOption(option);
}
const toDetail = e => {
  console.log(e)
}

onMounted(() => {
  platformAnalysisEcharts();
  analysisEchart();
});
</script>

<style lang="less" scoped>
.card {
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }

  .card-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
    line-height: 22px;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      background: @main-color;
      border-radius: 50%;
      margin-right: 8px;
    }
  }
}

.total-part {
  .part-main {
    margin-top: 32px;

    .item {
      padding: 8px;
      flex: 1;
      height: 190px;
      border-radius: 20px;
      margin-right: 16px;
      position: relative;

      &:nth-child(1) {
        background: linear-gradient(135deg, rgba(252, 161, 113, 0.1) 0%, rgba(246, 98, 144, 0.1) 100%);

        .item-num {
          color: @main-color;
        }
      }

      &:nth-child(2) {
        background: linear-gradient(135deg, rgba(81, 170, 254, 0.1) 0%, rgba(119, 78, 240, 0.1) 100%);

        .item-num {
          color: #4c64ff;
        }
      }

      &:nth-child(3) {
        background: linear-gradient(135deg, rgba(250, 217, 97, 0.1) 0%, rgba(255, 155, 4, 0.1) 100%);

        .item-num {
          color: #ffac04;
        }
      }

      &:nth-child(4) {
        background: linear-gradient(315deg, rgba(95, 215, 203, 0.1) 0%, rgba(136, 240, 182, 0.1) 100%);
        margin-right: 0;

        .item-num {
          color: #6cdbc9;
        }
      }

      img {
        position: absolute;
        width: 100px;
        height: 100px;
        right: 20px;
        top: 20px;
        z-index: 1;
      }

      .item-name {
        padding: 8px 0 0 16px;
        color: #666;
        line-height: 18px;
      }

      .item-num {
        font-size: 20px;
        line-height: 27px;
        margin-top: 12px;
        padding-left: 16px;
      }

      .item-platform {
        position: absolute;
        bottom: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: 100px;
        background: linear-gradient(180deg, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .3));
        border-radius: 14px 14px 20px 20px;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        z-index: 2;
        padding: 0 16px;

        .platform-item {
          .platform-item-name {
            color: #666;
            margin-bottom: 6px;
          }

          .platform-item-value {
            color: #333;
          }
        }
      }
    }
  }
}

.platform-part {
  .part-main {
    margin-top: 50px;
    margin-bottom: 12px;

    .platform-sort {
      .item {
        flex: 1;
        margin-right: 58px;
        position: relative;

        &:last-child {
          margin-right: 0;
        }

        .echart {
          width: 280px;
          height: 120px;
        }

        .item-tips {
          position: absolute;
          left: 50%;
          bottom: 68px;
          z-index: 10;
          transform: translateX(-35px);
          width: 70px;
          text-align: center;

          .tips-name {
            color: #333;
            margin-bottom: 8px;
          }

          .tips-desc {
            color: #666;
          }
        }

        .platform-bar {
          margin-top: 16px;
          width: 100%;
          height: 52px;
          background: #f8f8f8;
          border-radius: 14px;
          padding: 0 28px;

          p {
            &:nth-child(1) {
              color: @main-color;
            }

            &:nth-child(2) {
              color: #333;
            }

            &:nth-child(3) {
              color: #5e52cc;
            }

            img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}

.analysis-part {
  position: relative;

  .view-toggle {
    position: absolute;
    top: 24px;
    right: 40px;
    width: 100px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #f2f2f2;

    i {
      flex: 1;
      font-size: 20px;
      color: #999;
      height: 44px;
      line-height: 44px;
      text-align: center;

      &.active {
        color: @main-color;
      }
    }

    span {
      width: 1px;
      height: 24px;
      background: #ededed;
      border-radius: 1px;
    }
  }

  .part-main {
    margin-top: 40px;

    .content-trend-list {
      margin-top: 40px;
      margin-bottom: 40px;

      .content-trend-item {
        flex: 1;
        margin-right: 16px;
        height: 90px;
        border-radius: 14px;
        margin-right: 16px;
        padding: 16px 24px;
        border: 1px solid #f2f2f2;

        &.active {
          &:nth-child(1) {
            background: rgba(85, 92, 253, .06);
            border-color: #555cfd;
          }

          &:nth-child(2) {
            background: rgba(255, 82, 119, .06);
            border-color: @main-color;
          }

          &:nth-child(3) {
            background: rgba(253, 189, 54, .1);
            border-color: #fdbd36;
          }
        }

        &:hover {
          &:nth-child(1) {
            background: rgba(85, 92, 253, .06);
          }

          &:nth-child(2) {
            background: rgba(255, 82, 119, .06);
          }

          &:nth-child(3) {
            background: rgba(253, 189, 54, .1);
          }
        }

        &:nth-child(1) {
          i {
            color: #555cfd;
          }
        }

        &:nth-child(2) {
          i {
            color: @main-color;
          }
        }

        &:nth-child(3) {
          margin-right: 0;

          i {
            color: #fdbd36;
          }
        }

        .content-trend-item-name {
          margin-bottom: 6px;

          i {
            font-size: 20px;
            margin-right: 8px;
          }

          span {
            color: #666;
          }
        }

        .content-trend-item-num {
          color: #333;
          padding-left: 32px;
        }
      }
    }

    .platform-tip {
      position: relative;

      &::after {
        content: "*点击柱状图，可在下方查看详细监控报告";
        position: absolute;
        right: 16px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        line-height: 18px;
      }
    }

    #content-trend-echart {
      width: 100%;
      height: 300px;
    }

    .analysis-data {
      margin-top: 40px;
      width: 100%;
      padding: 40px 32px 28px 32px;
      background: linear-gradient(140deg, rgba(167, 117, 255, .1), rgba(255, 82, 119, .1));
      border-radius: 16px;

      .top {
        margin-bottom: 32px;

        .top-time {
          .date {
            color: #333;
            margin-right: 12px;
          }

          .tips {
            color: #999;
          }
        }

        .top-btn {
          width: 124px;
          height: 44px;
          background: linear-gradient(140deg, #a775ff, #ff5277);
          border-radius: 8px;
          color: #fff;

          i {
            color: #fff;
            margin-right: 10px;
          }
        }
      }

      .bottom {
        .data-item {
          flex: 1;
          margin-right: 12px;
          height: 100px;
          background: #fff;
          border-radius: 14px;
          padding: 24px;
          align-items: flex-end;

          &:nth-child(1) {
            .item-icon {
              background: rgba(76, 100, 255, .1);

              i {
                color: #555cfd;
              }
            }
          }

          &:nth-child(2) {
            .item-icon {
              background: rgba(248, 82, 119, .1);

              i {
                color: @main-color;
              }
            }
          }

          &:nth-child(3) {
            margin-right: 0;

            .item-icon {
              background: rgba(255, 172, 4, .1);

              i {
                color: #ffcc27;
              }
            }
          }

          .item-left {
            .item-icon {
              width: 50px;
              height: 50px;
              border-radius: 30px;
              margin-right: 16px;

              i {
                font-size: 28px;
              }
            }

            .label {
              color: #666;
              margin-bottom: 8px;
            }

            .value {
              color: #333;
            }
          }

          .item-right {
            color: #ff8a1c;

            i {
              color: #ff8a1c;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}

.other-part {
  .part-main {
    margin-top: 40px;

    .list {
      display: grid;
      justify-content: space-between;
      grid-column-gap: 12px;
      grid-row-gap: 12px;
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

.platform-tip {
  margin-bottom: 44px;

  .item {
    color: #333;
    margin-right: 35px;

    &:last-child {
      margin-right: 0;
    }

    span {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      margin-right: 8px;
    }
  }
}
</style>